<script setup lang="ts">
import { getusernameAPI } from '@/apis/user';
import { useUserStore } from '@/stores/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue'
import type { UserIndividualType } from '@/types/userInfo';
//行为
const router = useRouter()
const store = useUserStore()
const tuichu = () => {
    ElMessageBox.confirm(
        '是否退出',
        '温馨提示',
    {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            store.cleanToken()
            router.push('/login')
        ElMessage.success('退出成功')
    }).catch(()=>{})
    
    
}

const a = ref<UserIndividualType>()


onMounted(() => {
    getusernameAPI().then((res) => {
        a.value = res.data
        
    })
})
</script>
<template>
    <div>
        <!-- 结构 -->
        <el-container class="my-layout">
            <el-aside width="200px">
                <img width="100%" src="@/assets/images/logo.png" alt="">

                <!-- el-menu 导航菜单，默认垂直排列 -->
                <el-menu :default-active="$route.path" background-color="#023" text-color="#fff"
                    active-text-color="#409EFF" style="border-right: none;" router>

                    <!-- el-menu-item 菜单项 -->
                    <el-menu-item index="/">
                        <!-- el-icon-xx   element-ui 内置图标 -->
                        <i class="el-icon-s-home"></i> 数据概览
                    </el-menu-item>

                    <el-menu-item index="/article">
                        <i class="el-icon-document"></i> 内容管理
                    </el-menu-item>

                    <el-menu-item index="/publish">
                        <i class="el-icon-s-promotion"></i> 发布文章
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <span>{{ a?.mobile }}</span>
                    <el-link @click="tuichu()" :underline="false" icon="el-icon-unlock">退出</el-link>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style>
.my-layout {
    /* 1vw 视口宽度的 1% */
    /* 1vh 视口高度的 1% */
    height: 100vh;
}

.el-aside {
    background-color: #023;
}

.el-header {
    border-bottom: 1px solid #ddd;
}

.el-header {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px
}
</style>